@AIC-BV @mjauvin what's left on this?

@LukeTowers Should be finished

Could add allowDismiss (see comments)
#1053

@AIC-BV just a thought, is there a way we could integrate with the change monitor used in the cms section for the tabs to detect when a change has happened inside of a modal and warn / prevent the dismiss behaviour from being triggered in those cases?

@AIC-BV just a thought, is there a way we could integrate with the change monitor used in the cms section for the tabs to detect when a change has happened inside of a modal and warn / prevent the dismiss behaviour from being triggered in those cases?

I assume something like this could be a basic for that kind of behaviour

if (this.options.allowDismiss) {
    modal.on('click', function(e) {
        const target = e.target;
        if (target.classList.contains('control-popup')) {

            if (!modal.dataset.hasChanges) {
                modal.hide()
                $('.popup-backdrop').remove()
                $(document.body).removeClass('modal-open')
            } else {
                // popup warning them about unsaved changes
            }

        }
    });

    const inputs = modal.querySelectorAll('input')
    for (const input of inputs) {
        input.addEventListener('change', function() {
            modal.dataset.hasChanges = true
        })
    }
}

Thoughts @LukeTowers @mjauvin ?

@AIC-BV seems fine, have you tested it out?

I'm using everything except the latest comment: #1044 (comment)

@AIC-BV can we remove allowDismiss from this PR for now then? I don't want to support it unless it can be a bit safer first.

If its ok for you I will add the popup shortly instead

@AIC-BV can we remove allowDismiss from this PR for now then? I don't want to support it unless it can be a bit safer first.

Can you help me getting started?
Don't know how to do this using Winter UI.

Also, will this be enough?
For example: the code below will notice 'changes' when input has been changed, but if it is changed back to its original value, it will still be marked as changed etc. There are some loopholes to this simple logic.

PS:
The PR as is, works perfectly fine. Have been using it a lot, by many people, in production for a month now, but it shows no popup if they have unchanged changes (but it doesn't occur here)

if (this.options.allowDismiss) {
    modal.on('click', function(e) {
        const target = e.target;
        if (target.classList.contains('control-popup')) {

            if (!modal.dataset.hasChanges) {
                modal.hide()
                $('.popup-backdrop').remove()
                $(document.body).removeClass('modal-open')
            } else {
            
                // HOW CAN I DO THIS USING WINTER UI?
                // popup warning them about unsaved changes
                // where they can press 'Cancel' or 'Continue anyways'
            }

        }
    });

    const inputs = modal.querySelectorAll('input')
    for (const input of inputs) {
        input.addEventListener('change', function() {
            modal.dataset.hasChanges = 'true'
        })
    }
}

https://wintercms.com/docs/v1.2/ui/controls/popup#examples

There's existing code for tracking changes here: https://wintercms.com/docs/v1.2/ui/script/input-monitor

Was making another relation popup and added these properties in the relation_config:
Can't stress enough how good it works and how nice it is.

allowDismiss: true
cssClass: huge-popup

I tried the change monitor and it doesn't show the warning when closing the popup.
The change monitor has this 'issue' as well

For example: the code below will notice 'changes' when input has been changed, but if it is changed back to its original value, it will still be marked as changed

What is left for finishing this PR is a way to show a popup warning the user about unsaved changes using either Input Monitor or custom written JS.

if (this.options.allowDismiss) {
    modal.on('click', function(e) {
        const target = e.target;
        if (target.classList.contains('control-popup')) {

            if (!modal.dataset.hasChanges) {
                modal.hide()
                $('.popup-backdrop').remove()
                $(document.body).removeClass('modal-open')
            } else {
            
                // HOW CAN I DO THIS USING WINTER UI?
                // popup warning them about unsaved changes
                // where they can press 'Cancel' or 'Continue anyways'
                alert('UNSAVED CHANGES!')
               
            }

        }
    });

    const inputs = modal.querySelectorAll('input')
    for (const input of inputs) {
        input.addEventListener('change', function() {
            modal.dataset.hasChanges = 'true'
        })
    }
}

@jaxwilko any input?

@jaxwilko any input?

You can use Snowboard.flash() to trigger the flash messaging, I believe it's available in the backend.

Apart from that looks cool, I'll check it out and have a play when I have time :)

Strongly suggest to try it out :)
Works great and is being used here 8 hours/day by 3-4 collegues

@AIC-BV are you able to record a loom or something showing the new functionality and make a PR to the docs? If you can get those done then I should be able to quickly review and merge this before I push out 1.2.7.

1. This PR fixes the 'size' attribute, which was hardcoded before
2. Adds the 'cssClass' attribute: allowing you to customise the popup (I make it much bigger because it has important data for production)
3. And adds support for 'allowDismiss': https://www.loom.com/share/3c10c530854f4e0597f4dd00c632a5cc?sid=08f8142e-55b0-42fc-aae6-fab1b5820c77

allowDismiss = Clicking next to the modal closes it (on mousedown because if you drag to select something and release the mouse button outside the modal, it would close the modal too)
Great for reading the data in the record and not having to scroll down to close it

wintercms/docs#207

Ran composer update and this got overwritten ofcourse.
We still use this every single day

@AIC-BV waiting on the docs PR to get updated / my comment to be responded to: https://github.com/wintercms/docs/pull/207/files#r1739737060. Will also need to update from develop and recompile the JS.

@AIC-BV waiting on the docs PR to get updated / my comment to be responded to: https://github.com/wintercms/docs/pull/207/files#r1739737060. Will also need to update from develop and recompile the JS.

Oops 👀

@AIC-BV are we good with all the requested changes? I'd like this to get merged.

@AIC-BV are we good with all the requested changes? I'd like this to get merged.

I think there is this pending feedback but I don't know what to do with it wintercms/docs#207

@AIC-BV are we good with all the requested changes? I'd like this to get merged.

I think there is this pending feedback but I don't know what to do with it wintercms/docs#207

@LukeTowers could you clarify so that can be completed?

Walkthrough

The relation controller system is extended to support customizable popup modal styling and dismiss behavior. New parameters (size, cssClass, allowDismiss) are propagated from the PHP backend through the JavaScript relation handler to the Popup component, enabling configuration of modal appearance and backdrop-click dismissal directly from the RelationController.

Changes

Sequence Diagram

sequenceDiagram
    participant User
    participant RelationController as RelationController.php
    participant ClickHandler as clickViewListRecord()
    participant Popup as Popup Component
    participant Modal as Modal DOM

    User->>RelationController: Click list record
    RelationController->>ClickHandler: Generate JS call with<br/>size, cssClass, allowDismiss
    ClickHandler->>Popup: Create popup with new<br/>config parameters
    Popup->>Modal: Apply cssClass to<br/>modal-dialog element
    alt allowDismiss enabled
        Popup->>Modal: Attach mousedown listener<br/>to backdrop
        User->>Modal: Click backdrop area
        Modal->>Popup: Trigger dismiss
        Popup->>Modal: Remove modal & cleanup
    end
    Popup-->>User: Show styled modal

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}